<template>
  <Modal v-model="modal" title="完善信息">
    <Form :label-width="100" ref="form" :model="form" :rules="rules">
      <!-- <FormItem label="职业：" prop="type">
        <Select
          v-model="form.type"
          clearable
          >
          <Option v-for="item in typeList" :value="item.id" :key="item.id">{{item.name}}</Option>
        </Select>
      </FormItem> -->
      <FormItem label="是否专职：" prop="is_profession">
        <Select
          v-model="form.is_profession"
          clearable
          >
          <Option v-for="item in professionList" :value="item.id" :key="item.id">{{item.name}}</Option>
        </Select>
      </FormItem>
        <FormItem label="部门选择: " prop="department_id">
          <Select @on-change="getPosition" v-model="form.department_id" filterable clearable placeholder="请选择部门" >
            <Option
              v-for="(item, index) in Depart"
              :key="index"
              :label="item.name"
              :value="item.id">
            </Option>
          </Select>
        </FormItem>
        <FormItem label="职位: " prop="position_id">
          <Select v-model="form.position_id" filterable clearable placeholder="请选择职位" >
            <Option
              v-for="(item, index) in Position"
              :key="index"
              :label="item.name"
              :value="item.id">
            </Option>
          </Select>
        </FormItem>
        <FormItem label="角色: " prop="role_arr">
          <Select v-model="form.role_arr" multiple filterable clearable placeholder="请选择角色" >
            <Option
              v-for="(item, index) in role"
              :key="index"
              :label="item.name"
              :value="item.id">
            </Option>
          </Select>
        </FormItem>
      <FormItem label="用户名: " prop="username">
        <Input placeholder="用户名名称"  v-model="form.username" :maxlength="60"/>
      </FormItem>
      <FormItem label="密码: " prop="password">
        <Input placeholder="密码" type="password"  v-model="form.password" :maxlength="60"/>
      </FormItem>
      <FormItem label="手机号: " prop="phone">
        <Input placeholder="手机号"  v-model="form.phone" :maxlength="60"/>
      </FormItem>
    </Form>
    <div slot="footer">
      <Button class="mr" size="large" type="text" @click="closeModal">取消</Button>
      <Button type="primary" size="large" :disabled="disabled" @click="onSave">确定</Button>
    </div>
  </Modal>
</template>
<script>
export default {
  data() {
    return {
      modal: false,
      disabled: false,
      storeContractId: null,
      typeList: [{
        name: '设计师',
        id: '1'
      }, {
        name: '制版',
        id:' 2'
      }, {
        name: '制样',
        id: '3'
      }],
      professionList: [{
        name: '专职',
        id: ' 0'
      }, {
        name: '兼职',
        id: '1'
      }],
      form: {
        type: '',
        is_profession: '',
        username: '',
        password: '',
        phone: '',
        department_id: '',
        position_id: ''
      },
      rules: {
        type: [ {required: true, message: "请选择职业", trigger: "change"} ],
        is_profession: [ {required: true,  message: "请选择职业类型", trigger: "change"} ]
      },
      Depart: [],
      Position: [],
      role: []
    }
  },
  mounted() {
    this.getDepart()
    this.getRole()
  },
  methods: {
    updataForm(id) {
      this.$refs.form.resetFields()
      // this.form = {
      //   rewardIntegral: '',
      //   rewardRemark: ''
      // }
      this.disabled =  false
      this.company_id = id
      this.openModal()
    },
    openModal() {
      this.modal = true;
    },
    closeModal() {
      this.modal = false
    },
    getDepart() {
      this.$ajaxGet('/user/getDepartment').then(res => {
        this.Depart = res.map(item => {
          return {
            id: item.department_id.toString(),
            name: item.department_name
          }
        })
      })
    },
    // 获取职位
    getPosition() {
      this.$ajaxGet(`/user/getPosition?department_id=${this.form.department_id}`).then(res => {
        this.Position= res.map(item => {
          return {
            id: item.position_id.toString(),
            name: item.position_name
          }
        })
      })
    },
    // 角色列表
    getRole() {
      this.$ajaxGet('/role/companyRole').then(res => {
        this.role = res.map(item => {
          return {
            id: item.role_id.toString(),
            name: item.role_name
          }
        })
      })
    },
    onSave() {
      if (this.disabled) return
      this.disabled = true
      this.$refs["form"].validate(valid => {
        let param = {
          type: this.form.type,
          is_profession: this.form.is_profession,
          relate_id: this.company_id,
          username: this.form.username,
          password: this.form.password,
          phone: this.form.phone,
          department_id: this.form.department_id,
          position_id: this.form.position_id,
          role_arr: this.form.role_arr
        }
        if (valid) {
          this.$jsonPost(`/user/finishApplyInfo`, param).then(data => {
            this.closeModal()
            this.$Notice.success({
              title: '操作成功'
            })
            this.$emit("complete")
            this.disabled = false
          }).catch(() => {
            this.closeModal()
            this.disabled = false
          })
        } else {
          this.disabled = false
        }
      })
    }
  }
}
</script>
